<article class="module-account module-account-certification">
    <div class="layout-loading" v-if="isLoading === true">
        <loading></loading>
    </div>


    <div class="ui-account-box" v-if="currPage==='LEVEL0'">
        <id-verify v-on:goBack="goBack"></id-verify>
    </div>

    <div class="ui-account-box" v-if="currPage==='LEVEL1'">
        <addr-verify v-on:goBack="goBack"></addr-verify>
    </div>

    <div class="ui-account-box" v-if="isLoading === false && currPage === 'basic'">
        <h3 class="ui-title">{{ $t('certification.verifyTitle') }}</h3>
        <div class="form-box">
            <div class="m-info m-info--certification">
                <div class="tr">
                    <div class="td-title">{{ $t('certification.name') }}</div>
                    <div class="td-text" v-if="name!==null">{{name}}<i class="icon-sfrz"></i></div>
                    <div class="td-text" v-if="name===null">{{config.AUTH_STATUS_UNVERIFIED[$i18n.locale]}}</div>
                </div>
                <div class="tr">
                    <div class="td-title">{{ $t('certification.id') }}</div>
                    <div class="td-text">{{uid}}</div>
                </div>
                <div class="tr" v-if="REG_EMAIL.test(email)">
                    <div class="td-title">{{ $t('certification.email') }}</div>
                    <div class="td-text">{{email}}</div>
                </div>


                <div class="tr" v-if="level==='LEVEL0' || level==='LEVEL1' || level==='LEVEL2'">
                    <div class="td-title">{{ $t('certification.level') }}1</div>
                    <div class="td-status">{{userIdentification.auditStatus}}</div>
                    <div class="td-reason"
                        :class="{'td-reason--submitted':userIdentification.auditStatus===config.AUTH_STATUS_SUBMITTED[$i18n.locale]}">
                        {{userIdentification.auditMessage}}
                    </div>
                    <div class="td-operation">
                        <a href="javascript:;" @click="gotoPage('LEVEL0')">
                            <template
                                v-if="userIdentification.auditStatus===config.AUTH_STATUS_UNVERIFIED[$i18n.locale]">{{ $tc('certification.verifyOption', 1) }}</template>
                            <template
                                v-if="userIdentification.auditStatus===config.AUTH_STATUS_FAIL[$i18n.locale]">{{ $tc('certification.verifyOption', 2) }}</template>
                        </a>
                    </div>
                </div>
                <div class="tr" v-if="level==='LEVEL1' || level==='LEVEL2'">
                    <div class="td-title">{{ $t('certification.level') }}2</div>
                    <div class="td-status">{{userResidence.auditStatus}}</div>
                    <div class="td-reason"
                        :class="{'td-reason--submitted':userResidence.auditStatus===config.AUTH_STATUS_SUBMITTED[$i18n.locale]}">
                        {{userResidence.auditMessage}}
                    </div>
                    <div class="td-operation">
                        <a href="javascript:;" @click="gotoPage('LEVEL1')">
                            <template
                                v-if="userResidence.auditStatus===config.AUTH_STATUS_UNVERIFIED[$i18n.locale]">{{ $tc('certification.verifyOption', 1) }}</template>
                            <template
                                v-if="userResidence.auditStatus===config.AUTH_STATUS_FAIL[$i18n.locale]">{{ $tc('certification.verifyOption', 2) }}</template>
                        </a>
                    </div>
                </div>

                <!--<div class="tr">
                    <div class="td-title">{{ $t('basic.withdrawlimit')}}</div>
                    <div class="td-text">{{limit}}</div>
                </div>-->
            </div>
        </div>
    </div>

    <div class="ui-account-box" v-if="isLoading === false  && currPage === 'basic'">
        <h3 class="ui-title-account">{{$t('basic.withdrawlimit')}}</h3>
        <div class="box-content">
            <div class="table-wrap">
                <div class="m-table">
                    <table>
                        <thead>
                            <tr>
                                <th width="25%">{{ $t('asset.digitalAsset') }}</th>
                                <th class="fn-ta-right" width="25%">{{ $t('certification.level') }}0</th>
                                <th class="fn-ta-right" width="25%">{{ $t('certification.level') }}1</th>
                                <th class="fn-ta-right" width="25%">{{ $t('certification.level') }}2</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in limitArr" v-if="isLevelLoading === false && limitArr.length > 0">
                                <td width="25%">{{item.assetCode}}</td>
                                <td class="fn-ta-right" width="25%">
                                    <span class="text"
                                        v-if="+item.WITHDRAWLEVEL_0 > 0">{{ item.WITHDRAWLEVEL_0 }}</span>
                                    <span class="text"
                                        v-if="+item.WITHDRAWLEVEL_0 === 0">{{ $t('basic.nolimit') }}</span>
                                    <span class="text"
                                        v-if="+item.WITHDRAWLEVEL_0 === -1">{{ $t('basic.noout') }}</span>
                                </td>
                                <td class="fn-ta-right" width="25%">
                                    <span class="text"
                                        v-if="+item.WITHDRAWLEVEL_1 > 0">{{ item.WITHDRAWLEVEL_1 }}</span>
                                    <span class="text"
                                        v-if="+item.WITHDRAWLEVEL_1 === 0">{{ $t('basic.nolimit') }}</span>
                                    <span class="text"
                                        v-if="+item.WITHDRAWLEVEL_1 === -1">{{ $t('basic.noout') }}</span>
                                </td>
                                <td class="fn-ta-right" width="25%">
                                    <span class="text"
                                        v-if="+item.WITHDRAWLEVEL_2 > 0">{{ item.WITHDRAWLEVEL_2 }}</span>
                                    <span class="text"
                                        v-if="+item.WITHDRAWLEVEL_2 === 0">{{ $t('basic.nolimit') }}</span>
                                    <span class="text"
                                        v-if="+item.WITHDRAWLEVEL_2 === -1">{{ $t('basic.noout') }}</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <loading v-if="isLevelLoading"></loading>
                </div>
                <!--<<pager :page-no="condition.pageNo"
                       :page-size="condition.pageSize"
                       :on-page-change="changePage"
                       :page-num="condition.pageNum"></pager>-->
            </div>
        </div>
    </div>

    <unsupported-countries v-if="showUnsupportedCountries" v-on:showflag="changeUnsupportCountry">
    </unsupported-countries>


</article>